<template>
    <div class="nav">
        <div class="icon" v-for="item of iconList" :key="item.id">
            <div class="icon-img">
                <img class="icon-img-content" :src="item.imgUrl" alt="" />
            </div>
            <p class="icon-dec">{{item.desc}}</p>
            
            
        </div>

    </div>
</template>
<script>
export default {
    name:'HomeHeader',
    data(){
        return{
            iconList:[{
                id:'0001',
                imgUrl:require("../assets/icon1.png"),
                desc:'每日精选'
            },{
                id:'0002',
                imgUrl:require("../assets/icon2.png"),
                desc:'头像'
            },{
                id:'0003',
                imgUrl:require("../assets/icon3.png"),
                desc:'表情'
            },{
                id:'0004',
                imgUrl:require("../assets/icon4.png"),
                desc:'背景图'
            }]
        }
    }
}
</script>
<style scoped lang="stylus">
.nav
    overflow :hidden;
    height:0px;
    padding-bottom:25%;
    .icon
        position :relative;
        overflow:hidden;
        float:left;
        width:25%;
        height :0px;
        padding-bottom :25%;
        .icon-img
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:25px;
            box-sizing:border-box;
            padding:1px;
            .icon-img-content
                height :100%;
                display:block;
                margin:0 auto;
        .icon-dec
            position:absolute;
            left:0px;
            right:0;
            bottom:0px;
            height :20px;
            line-height:40px;
            text-align:center;



        
</style>

